<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>计件</title>
		<script src="js/v3.2.8/vue.global.prod.js"></script>
		<style>
			* {
			   font-size: 20px;
			}
			th, td {
				text-align: center;
				width: 200px;
			}
			input {
				width: 100px;
				border: 1px solid black;
				border-radius: 5px;
				padding-left: 5px;
			}
			.add-button {
				width: 100px;
			}
			.delete-button {
				margin-left: 2px;
				margin-right: 10px;
				font-weight: bold;
				padding: 0 2px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table class="table" style="overflow-x: scroll;">
			  <thead>
			    <tr>
					<th scope="col">#</th>
					<th>应付工资</th>
					<th v-for="(price, workName) in work" scope="col"><span>{{(workName + '/' + price)}}</span><button @click="deleteWork(workName)" class="delete-button">x</button></th>
					<th><button @click="prepareAddWork" class="add-button">添加工作</button><div></th>
			    </tr>
			  </thead>
			  <tbody>
				  <tr v-for="(count, memberName) in members">
					  <th scope="row"><button @click="deleteMember(memberName)" class="delete-button">x</button>{{memberName}}</th>
					  <th><div style="width: 200px;"><span>{{sum[memberName]}} 元</span></div></th>
					  <td v-for="(price, workName) in work"><input type="number" v-model="members[memberName][workName]"></td>
				  </tr>
				  <tr>
					  <td><button @click="prepareAddMember" class="add-button">添加员工</button></td>
				  </tr>
			  </tbody>
			</table>
		</div>
		<script>
			const App = {
				methods: {
					fixNum(num) {
						return Number(num).toFixed(3);
					},
					prepareAddWork() {
						let workName = prompt('输入工作名称');
						if (!workName) {
							return;
						}
						let price = 0;
						while (true) {
							price = prompt('输入单价');
							if (price == null) return;
							if (isNaN(parseFloat(price))) {
								alert('单价需要输入数字，刚才输入了(' + price + ')');
								continue;
							}
							break;
						}
						this.addWork(workName, price);
					},
					addWork(workName, price) {
						this.work[workName] = price;
						for (let memberName in this.members) {
							this.members[memberName][workName] = 0;
						}
					},
					deleteWork(workName) {
						delete this.work[workName];
						for (let memberName in this.members) {
							delete this.members[memberName][workName];
						}
					},
					prepareAddMember() {
						let memberName = prompt('输入员工名称');
						if (!memberName) return;
						if (this.members[memberName]) {
							alert('员工' + memberName + '已经添加过了');
							return;
						}
						this.addMember(memberName);
					},
					addMember(memberName) {
						let count = {};
						for (let workName in this.work) {
							count[workName] = 0;
						}
						this.members[memberName] = count;
					},
					deleteMember(memberName) {
						delete this.members[memberName];
						delete this.sum[memberName];
					}
				},
				watch: {
					members: {
						deep: true,
						immediate: true,
						handler: function (newVal, old) {
							for (let memberName in newVal) {
								let sum = 0;
								let count = newVal[memberName];
								for (let workName in this.work) {
									let price = this.work[workName];
									let num = count[workName];
									let res = price * num;
									console.log(workName + '单价(' + this.fixNum(price) + '), ' + memberName + '件数(' + num + ') , 合计(' + this.fixNum(res) + ')');
									sum += res;
								}
								console.log(memberName + '的工资：' + this.fixNum(sum) + '元');
								this.sum[memberName] = this.fixNum(sum);
							}
						},
					}
				},
				data() {
					return {
						members: {
							// '张三': {
							// 	'90度旋转': 10,
							// 	'金工': 10,
							// },
							// '李四': {
							// 	'90度旋转': 2100,
							// 	'金工': 1900
							// }
						},
						work: {
							// '90度旋转': 0.035,
							// '金工': 0.035
						},
						sum: {
							// '张三': 123,
							// '李四': 321
						}
					}
				}
			};
			Vue.createApp(App).mount('#app');
		</script>
	</body>
</html>
